<template>
    <div style="width: 100vw;height: 100vh;">
        <div ref="charts" id="charts" style="width: 95%;height: 30%;margin: auto;border-radius: 18px;border: 1px solid #ccc;"></div>
        <van-tabbar route style="position: fixed;left: 0;height: 7%;width: 100vw;">
            <van-tabbar-item replace to="/community" >
                <span>社区</span>
                <template slot="icon">
                    <img src="@/assets/tabbar/community.png" />
                </template>
            </van-tabbar-item>
            <van-tabbar-item replace to="/analysis" >
                <span>数据分析</span>
                <template slot="icon">
                    <img src="@/assets/tabbar/analysis.png" />
                </template>
            </van-tabbar-item>
            <van-tabbar-item replace to="/home" >
                <span></span>
                <template slot="icon">
                    <img src="@/assets/tabbar/home.png" />
                </template>
            </van-tabbar-item>
            <van-tabbar-item replace to="/service" >
                <span>服务</span>
                <template slot="icon">
                    <img src="@/assets/tabbar/service.png" />
                </template>
            </van-tabbar-item>
            <van-tabbar-item replace to="/mine" >
                <span>我的</span>
                <template slot="icon">
                    <img src="@/assets/tabbar/mine.png" />
                </template>
            </van-tabbar-item>
        </van-tabbar>
    </div>
</template>
<script>
    import * as echarts from 'echarts';
    export default{
        data(){
            return{
                    option:{
                        title: {
                        text: '月度充电指标趋势',
                        textStyle: {
                            fontSize: 18,
                            fontFamily:"san-serif",
                            fontWeight: 'normal'
                        },
                        left: 15,
                        top: 15
                    },
                    legend:{
                        data: ['充电次数','充电量','花费'],
                        bottom:0
                    },
                    color:['#398ade','#19be6b','#ff9900'],
                    xAxis:{
                        name:'月份',
                        data:['23/01','23/02','23/03','23/04','23/05','23/06']
                    },
                    yAxis:{
                        type:'value'
                    },
                    series:[
                        {
                            name:'充电次数',
                            data:[
                                1,2,34,5,6,6
                            ],
                            type:'bar'
                        },
                        {
                            name:'充电量',
                            data:[
                                1,2,34,5,6,6
                            ],
                            type:'bar'
                        },
                        {
                            name:'充电量',
                            data:[
                                1,2,34,5,6,6
                            ],
                            type:'bar'
                        },
                        {
                            name:'花费',
                            data:[
                                1,2,34,5,6,6
                            ],
                            type:'bar'
                        }
                    ],                    
                },

            }
        },
        methods:{
            initecharts(){
                let charts = this.$refs['charts']
                let myChart = echarts.init(charts)
                myChart.setOption(this.option)
            }
        },
        mounted(){
           this.initecharts();
        }
    }
</script>
<style lang="scss">

</style>